<!DOCTYPE html>
<html lang="zh-cn">
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <title></title>
		<style>
			[v-cloak]{
				display: none;
			}
		</style>
		<script src="./src/vue.js"></script>
	</head>

	<body>
		<div id="app" v-cloak>
			<button v-on:click="miaov">按钮</button>
			<div v-show="display">控制显示隐藏</div>
			<hr>
		</div>
		<script>
			/*
				v-on:事件名="处理函数|表达式|处理函数执行"

					在触发事件，要给执行的函数传参，在模板中直接写函数执行形式
					v-on:click="maiov(1)"

				事件对象，是作为事件处理函数的第一个参数

				如果是写成了函数执行，在模板中使用$event传给方法，拿到事件对象

				在methods中定义的函数，this都指向当前的根实例
			*/
			let vm = new Vue({
				el: '#app',
				data: { 
					display:true
				},
				methods:{
					miaov(){
						console.log(this === vm);
						console.log(this);

						this.display = !this.display;
					}
				}
			});



		</script>
	</body>
</html>